{include file="public/header" /}
{load href="__PLUGINS__bootstrap/bootstrap-table.min.css"}
{load href="__PLUGINS__bootstrap/bootstrap-table.min.js"}
<style>
	.col-md-4{
		padding: 0 0 0 15px;
		margin: 10px 0;
	}
	.table{
		margin-bottom: unset;
	}
</style>
<body class="col-md-12">
                    <div class="fixed-table-toolbar">
                        <form method="get" action="" style="display: flex;">
                            <div class="pull-left search" style="display: flex;">
                                <input name="time" type="text" id="time" class="form-control layui-input" value="{present name='time'}{$time}{/present}" placeholder="时间" autocomplete="off" style="height:34px;width:180px;margin:0 10px;">
                                    <button style="border-radius:0px; border:1px solid #e5e6e7;"
                                            class="btn btn-default btn-outline" type="submit" id="search-btn">查询
                                    </button>
                            </div>
                        </form>
                    </div>
<div class="row">
  <div class="col-md-4" style="max-height: 320px;overflow-y: auto;">
	<table class="table table-hover table-bordered table-striped">
	  <tr style="position: sticky;top: 0;">
	    <th>年龄</th>
	    <th>男</th>
	    <th>女</th>
	  </tr>
	  {php}
	  function repalces($val){
	  	if (strpos($val, 'lt_') !== false) {
	  		$val = str_replace('lt_','小于',$val);
	  	} else if (strpos($val, 'bt_') !== false) {
	  		$val = str_replace('bt_','',$val);
  			$val = str_replace('_','至',$val);
	  	} else if (strpos($val, 'gte_') !== false) {
	  		$val = str_replace('gte_','',$val) . '以上';
	  	}
	  	return $val;
	  }
	  {/php}
	  	{volist name="data.age_areas.female" id="v"}
	  <tr>
	    <td>{:repalces($key)}</td>
	    <td>{$data.age_areas.female[$key]}</td>
	    <td>{$data.age_areas.male[$key]}</td>
	  </tr>
	  	{/volist}
	</table>
	</div>
  <div class="col-md-4" style="max-height: 320px;overflow-y: auto;">
  	<table class="table table-hover table-bordered table-striped">
	  <tr style="position: sticky;top: 0;">
	    <th>品牌</th>
	    <th>数量</th>
	  </tr>
	  	{volist name="data.device_brands" id="v"}
	  	{if condition="$data.device_brands[$key]"}
	  <tr>
	    <td>{$key}</td>
	    <td>{$data.device_brands[$key]}</td>
	  </tr>
	  	{/if}
	  	{/volist}
	</table>
  </div>
  <div class="col-md-4" style="max-height: 320px;overflow-y: auto;">
	<table class="table table-hover table-bordered table-striped">
	  <tr style="position: sticky;top: 0;">
	    <th>APP版本</th>
	    <th>数量</th>
	  </tr>
	  	{volist name="data.app_versions" id="v"}
	  	{if condition="$data.app_versions[$key]"}
	  <tr>
	    <td>{$key}</td>
	    <td>{$data.app_versions[$key]}</td>
	  </tr>
	  	{/if}
	  	{/volist}
	</table>
  </div>
</div>
<div class="row" style="padding-bottom: 50px;">
  <div class="col-md-2" style="max-height: 635px;overflow-y: auto;">
	<table class="table table-hover table-bordered table-striped">
	  <tr style="position: sticky;top: 0;">
	    <th>系统版本</th>
	    <th>数量</th>
	  </tr>
	  	{volist name="data.system_versions" id="v"}
	  	{if condition="$data.system_versions[$key]"}
	  <tr>
	    <td>{$key}</td>
	    <td>{$data.system_versions[$key]}</td>
	  </tr>
	  	{/if}
	  	{/volist}
	</table>
  </div>
  <div class="col-md-5" style="max-height: 635px;overflow-y: auto;">
	<table class="table table-hover table-bordered table-striped">
	  <tr style="position: sticky;top: 0;">
	    <th>时段</th>
	    <th>文字</th>
	    <th>语音通话</th>
	    <th>视频通话</th>
	    <th>视频计费</th>
	    <th>视频时长</th>
	    <th>视频异常</th>
	  </tr>
	  	{volist name="data.chat" id="v"}
	  	{if condition="$key=='count'"}
	  <tr>
	    <td>{$key}</td>
	    <td colspan="3">{$data.chat[$key]}</td>
	  </tr>
	  {elseif condition="$key=='usersexcount'"}
	  {elseif condition="$key=='chat_list_count_en'"}
	  {else}
	  <tr>
	    <td>{$key}</td>
	    <td>{$data.chat[$key]['word']}</td>
	    <td>{$data.chat[$key]['audio']}</td>
	    <td>{$data.chat[$key]['video']}</td>
	    <td>{$data.chat[$key]['vhs']}</td>
	    <td>{$data.chat[$key]['vt'] ?? ''}</td>
	    <td>
	    	{if condition="$data.chat[$key]['ve']"}
	    	{if condition="$key != 'counts'"}
	    	<a onclick="chat('{$data.chat[$key]['veid']}')" style="color:#40BCF7">{$data.chat[$key]['ve']}</a>
	    	{else}
	    	{$data.chat[$key]['ve']}
	    	{/if}
	    	{/if}
	    </td>
	  </tr>
	  	{/if}
	  	{/volist}
	</table>
	</div>
  <div class="col-md-5" style="max-height: 635px;overflow-y: auto;">
	<table class="table table-hover table-bordered table-striped">
	  <tr style="position: sticky;top: 0;">
	    <th width="55">日期</th>
	    <th>聊天记录总数量</th>
	    <th>女可发消息对数</th>
	    <th>有聊天的女用户数</th>
	    <th>有聊天的男用户数</th>
	    <th>获得积分账号数量</th>
	    <th>消费金币账号数量</th>
	    <th>总充值</th>
	    <th>充值账号数量</th>
	    <th>充值上限数量</th>
	  </tr>
	  	{volist name="data.chat_counts" id="v"}
	  <tr>
	    <td>{:str_replace(date('Y').'-','',$key)}</td>
	    <td>{$data.chat_counts[$key]}</td>
	    <td>{$data.chat_list_count_en[$key]}</td>
	    <td>{$data.chat_sexs[$key]['female']}</td>
	    <td>{$data.chat_sexs[$key]['male']}</td>
	    <td>{$data.chat_sexs[$key]['female_s']}</td>
	    <td>{$data.chat_sexs[$key]['male_s']}</td>
	    <td>{$data.topups[$key]['count_price']??0}</td>
	    <td>{$data.topups[$key]['count_account']??0}</td>
	    <td>{$data.topups[$key]['count_limit']??0}
	    	<span onclick="showUids('{$data.topups[$key]['limit_uids']??'暂无数据'}')">查看</span>
	    </td>

	  </tr>
	  	{/volist}
	</table>
  </div>
</div>
	

</body>
{include file="public/footer" /}
<script type="text/javascript">

    layui.use(['laydate'], function(){
        var laydate = layui.laydate;

        laydate.render({
            elem: '#time' //指定元素
            ,type: 'date'
            ,trigger: 'click'
        });
    })

    function chat(ids)
    {
        layui.use('layer', function(){
            var layer = layui.layer;
            layer.open({
                title :'预览',
                area: ['100%', '100%'],
                type: 2,
                content: '{:url("usertalk/grouprecords")}?search=id&name='+ids
            });
        });
    }

    function showUids(txt) {
        layui.use('layer', function(){
            var layer = layui.layer;
            layer.open({
                title :'预览',
                area: ['500px', '300px'],
                type: 1,
                content: `<div style="word-wrap:break-word;">${txt}</div>`
            });
        });
    }
</script>